<template>
  <div class="dashboard-container">
    <!-- 跳转到顶部小插件 -->
    <github-corner class="github-corner" />

    <el-card shadow="never">
      <el-row justify="space-between">
        <!-- 个人信息 -->
        <el-col :span="18" :xs="24">
          <div class="flex h-full items-center">
            <img
              class="w-20 h-20 mr-5 rounded-full"
              :src="userStore.user.baseUser.portrait || userPortrait"
            />
            <div>
              <p>{{ greetings }}</p>
              <p class="text-sm text-gray">
                {{ randomPhrase }}
              </p>
            </div>
          </div>
        </el-col>

        <!-- 系统数据统计 -->
        <el-col :span="6" :xs="24">
          <div class="flex h-full items-center justify-around">
            <el-statistic
              v-for="item in statisticData"
              :key="item.key"
              :value="item.value"
            >
              <template #title>
                <div class="flex items-center">
                  <svg-icon :icon-class="item.iconClass" size="20px" />
                  <span class="text-[16px] ml-1">{{ item.title }}</span>
                </div>
              </template>
              <template v-if="item.suffix" #suffix>/100</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 业务数据统计 -->
    <BizStatistics />

    <el-row :gutter="10" class="mt-5">
      <el-col :xs="24" :span="16">
        <!-- 访问趋势统计图 -->
        <VisitTrend id="VisitTrend" width="100%" height="400px" />
      </el-col>
      <el-col :xs="24" :span="8">
        <MessagePanel />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { RandomPhraseConst } from "@/views/center/dashboard/RandomPhraseConst";
import userPortrait from "@/assets/images/user_portrait.png";
import VisitTrend from "@/views/center/dashboard/components/VisitTrend.vue";
import MessagePanel from "@/views/center/dashboard/components/DashboardMessagePanel.vue";
import BizStatistics from "@/views/center/dashboard/components/BizStatistics.vue";

defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});

/** 随机励志短语 */
const randomPhrase = ref(RandomPhraseConst[Math.floor(Math.random() * 93)]);

const userStore = useUserStore();

const date: Date = new Date();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (hours >= 8 && hours < 12) {
    return "上午好，" + userStore.user.baseUser.userName + "！";
  } else if (hours >= 12 && hours < 18) {
    return "下午好，" + userStore.user.baseUser.userName + "！";
  } else if (hours >= 18 && hours < 24) {
    return "晚上好，" + userStore.user.baseUser.userName + "！";
  } else {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

// 右上角数量
const statisticData = ref([
  {
    value: 99,
    iconClass: "messages",
    title: "消息",
    key: "messages",
  },
  {
    value: 50,
    iconClass: "todo",
    title: "待办",
    suffix: "/100",
    key: "upcoming",
  },
  {
    value: 10,
    iconClass: "projects",
    title: "项目",
    key: "projects",
  },
]);
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
}
</style>
